<template>
  <div class="h-full">
    <fs-crud ref="crudRef" v-bind="crudBinding" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useFs, dict } from '@fast-crud/fast-crud';
import createCrudOptions from './crud';

const router = useRouter();
const route = useRoute();

const apiPrefix = '/charge';
const context: any = {
  router,
  apiPrefix,
  columns: {
    id: {
      title: '订单ID',
      type: 'text',
      search: { show: true }
    },
    payer: {
      title: '付款人',
      type: 'text'
    },
    amount: {
      title: '付款金额',
      type: 'number'
    },
    currencyCode: {
      title: '币种',
      type: 'text',
      column: {
        width: 100
      }
    },
    status: {
      title: '状态',
      type: 'dict-switch',
      column: {
        width: 100
      },
      form: {
        value: true
      },
      dict: dict({
        data: [
          { value: 'CREATED', label: '订单创建', color: 'warning' },
          { value: 'COMPLETED', label: '订单完成', color: 'success' }
        ]
      })
    }
  }
};

const { crudRef, crudBinding, crudExpose } = useFs({
  createCrudOptions,
  context
});

onMounted(() => {
  if (route.query.id) {
    console.log('onMounted...', route.query.id);
  }

  crudExpose.doRefresh();
});
</script>
